I am trying see if there is a way to indicate in the react app that its a staging through a banner when we run npm build with staging flag. The production build must not have this banner, but only staging.
You can achieve this with feature flag.
Feature flag allows you to push your code to whatever enviorment you wish to, however the feature (banner) will be visible only if the it is enabled on the specific enviornment.
Since you wish to test on staging, you can enable the flag there and disable it on production code. This way your code will be pushed to other enviornments but it will not be visible on production.
Sample:
.env.development
FEATURE_FLAG_TOP_BANNER=enabled
Banner.tsx
// Some banner component
return (
// Show your banner
)
index.tsx (the component where you wish to display Banner)
if(process.env.FEATURE_FLAG_TOP_BANNER === 'enabled') return <Banner />
Production enviorment file
.env.production
FEATURE_FLAG_TOP_BANNER=disabled
Now that your development environment has FEATURE_FLAG_TOP_BANNER enabled, it will always show the banner. Same applies for staging. For production use, setting it to disabled will not show the banner!
Optionally: If multiple env files are new for you and sounds a bit confusing, you can create single .env file which on local and staging would have the feature flag set to enabled and on production set it to disabled or simply not have that key in the prod file.
Read more: https://www.atlassian.com/continuous-delivery/principles/feature-flags